<template>
  <div class="real-table">
    <div class="panel">
      <el-button type="success" plain @click="countData">整理</el-button>
    </div>
    <el-table :data="tableData">
      <el-table-column
        v-for="row of rowDim"
        :key="row.prop"
        :label="row.title"
        :prop="row.prop"
        fixed
      ></el-table-column>
      <table-column
        v-for="(s, i) of columns"
        :data="s"
        :key="i"
        :prefix="s.key"
      ></table-column>
    </el-table>
  </div>
</template>
<script>
import tableColumn from "../components/tableColumn";
export default {
  data() {
    return {
      originData: [
        {
          THEDVALUE: "202102",
          PROVINCE: "北京",
          CATEGORYNAME: "2元超级包",
          当期活跃: "0",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202102",
          PROVINCE: "北京",
          CATEGORYNAME: "畅视C+",
          当期活跃: "14",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202102",
          PROVINCE: "北京",
          CATEGORYNAME: "畅视后向",
          当期活跃: "1541",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202102",
          PROVINCE: "北京",
          CATEGORYNAME: "畅视互娱",
          当期活跃: "0",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202102",
          PROVINCE: "北京",
          CATEGORYNAME: "畅视流量",
          当期活跃: "30624",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202102",
          PROVINCE: "北京",
          CATEGORYNAME: "沃畅视",
          当期活跃: "19757",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202102",
          PROVINCE: "北京",
          CATEGORYNAME: "小娱八斗",
          当期活跃: "0",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202102",
          PROVINCE: "福建",
          CATEGORYNAME: "2元超级包",
          当期活跃: "0",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202102",
          PROVINCE: "福建",
          CATEGORYNAME: "畅视C+",
          当期活跃: "2",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202102",
          PROVINCE: "福建",
          CATEGORYNAME: "畅视后向",
          当期活跃: "727",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202102",
          PROVINCE: "福建",
          CATEGORYNAME: "畅视互娱",
          当期活跃: "0",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202102",
          PROVINCE: "福建",
          CATEGORYNAME: "畅视流量",
          当期活跃: "13409",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202102",
          PROVINCE: "福建",
          CATEGORYNAME: "其它",
          当期活跃: "0",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202102",
          PROVINCE: "福建",
          CATEGORYNAME: "沃畅视",
          当期活跃: "11028",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202102",
          PROVINCE: "福建",
          CATEGORYNAME: "小娱八斗",
          当期活跃: "0",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202103",
          PROVINCE: "北京",
          CATEGORYNAME: "2元超级包",
          当期活跃: "0",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202103",
          PROVINCE: "北京",
          CATEGORYNAME: "畅视C+",
          当期活跃: "16",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202103",
          PROVINCE: "北京",
          CATEGORYNAME: "畅视后向",
          当期活跃: "1483",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202103",
          PROVINCE: "北京",
          CATEGORYNAME: "畅视互娱",
          当期活跃: "0",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202103",
          PROVINCE: "北京",
          CATEGORYNAME: "畅视流量",
          当期活跃: "29947",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202103",
          PROVINCE: "北京",
          CATEGORYNAME: "沃畅视",
          当期活跃: "19452",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202103",
          PROVINCE: "北京",
          CATEGORYNAME: "小娱八斗",
          当期活跃: "0",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202103",
          PROVINCE: "福建",
          CATEGORYNAME: "2元超级包",
          当期活跃: "0",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202103",
          PROVINCE: "福建",
          CATEGORYNAME: "畅视C+",
          当期活跃: "9",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202103",
          PROVINCE: "福建",
          CATEGORYNAME: "畅视后向",
          当期活跃: "683",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202103",
          PROVINCE: "福建",
          CATEGORYNAME: "畅视互娱",
          当期活跃: "0",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202103",
          PROVINCE: "福建",
          CATEGORYNAME: "畅视流量",
          当期活跃: "13165",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202103",
          PROVINCE: "福建",
          CATEGORYNAME: "其它",
          当期活跃: "0",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202103",
          PROVINCE: "福建",
          CATEGORYNAME: "沃畅视",
          当期活跃: "10863",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202103",
          PROVINCE: "福建",
          CATEGORYNAME: "小娱八斗",
          当期活跃: "0",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202104",
          PROVINCE: "北京",
          CATEGORYNAME: "2元超级包",
          当期活跃: "0",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202104",
          PROVINCE: "北京",
          CATEGORYNAME: "畅视C+",
          当期活跃: "15",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202104",
          PROVINCE: "北京",
          CATEGORYNAME: "畅视后向",
          当期活跃: "985",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202104",
          PROVINCE: "北京",
          CATEGORYNAME: "畅视互娱",
          当期活跃: "0",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202104",
          PROVINCE: "北京",
          CATEGORYNAME: "畅视流量",
          当期活跃: "26090",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202104",
          PROVINCE: "北京",
          CATEGORYNAME: "其它",
          当期活跃: "0",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202104",
          PROVINCE: "北京",
          CATEGORYNAME: "沃畅视",
          当期活跃: "15864",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202104",
          PROVINCE: "北京",
          CATEGORYNAME: "小娱八斗",
          当期活跃: "0",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202104",
          PROVINCE: "福建",
          CATEGORYNAME: "2元超级包",
          当期活跃: "0",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202104",
          PROVINCE: "福建",
          CATEGORYNAME: "畅视C+",
          当期活跃: "12",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202104",
          PROVINCE: "福建",
          CATEGORYNAME: "畅视后向",
          当期活跃: "507",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202104",
          PROVINCE: "福建",
          CATEGORYNAME: "畅视互娱",
          当期活跃: "0",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202104",
          PROVINCE: "福建",
          CATEGORYNAME: "畅视流量",
          当期活跃: "11243",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202104",
          PROVINCE: "福建",
          CATEGORYNAME: "其它",
          当期活跃: "0",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202104",
          PROVINCE: "福建",
          CATEGORYNAME: "沃畅视",
          当期活跃: "8563",
          去年同期有效用户活跃度: "0",
        },
        {
          THEDVALUE: "202104",
          PROVINCE: "福建",
          CATEGORYNAME: "小娱八斗",
          当期活跃: "0",
          去年同期有效用户活跃度: "0",
        },
      ],
      rowDim: [
        { title: "日期", prop: "THEDVALUE" },
        { title: "省份", prop: "PROVINCE" },
      ],
      columnDim: ["CATEGORYNAME"],
      target: ["当期活跃", "去年同期有效用户活跃度"],
      columns: [],
      tableData: [],
    };
  },
  created() {},
  methods: {
    countData() {
      let { rowDim, columnDim, target } = this;
      let mergeData = this.originData.reduce(
        (r, item) => {
          let nowColumn = [...columnDim];
          let prefix = "";
          let childs = r.columns;
          while (nowColumn.length) {
            let columnKey = nowColumn.shift();
            prefix += item[columnKey] + "--";
            let leaf = childs.find((j) => j.key == item[columnKey]);
            if (!leaf) {
              leaf = { key: item[columnKey], children: [] };
              childs.push(leaf);
            }
            childs = leaf.children;
          }
          let valueObject = r.data.find((d) => {
            for (let rowKey of rowDim) {
              if (d[rowKey.prop] != item[rowKey.prop]) return false;
            }
            return true;
          });
          if (!valueObject) {
            valueObject = rowDim.reduce(
              (re, ro) => ({ ...re, [ro.prop]: item[ro.prop] }),
              {}
            );
            r.data.push(valueObject);
          }
          target.forEach((t) => {
            if (!childs.find((c) => c.key == t)) {
              childs.push({ key: t });
            }
            valueObject[prefix + t] = item[t];
          });
          return r;
        },
        { columns: [], data: [] }
      );
      this.columns = mergeData.columns;
      this.tableData = mergeData.data;
    },
  },
  components: {
    [tableColumn.name]: tableColumn,
  },
};
</script>
<style lang="scss">
.real-table {
  .panel {
    padding-bottom: 20px;
  }
}
</style>